<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Day7课后作业</title>
	<style>
		span {
			user-select: none;
		}
	</style>
	<script src="./rest.js"></script>
</head>

<body>
	<p>用户要求：名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于20 [0-9 a-z A-Z]</p>
	<p>
		<label for="user">用户名</label>
		<input id="user" name="user" type="text">
		<span id="user_span"></span>
	</p>
	<p>密码6-12位 不能包含特殊字符 (弱 z/1/A 中 包含两种 强 包含三种)</p>
	<p>
		<label for="pwd">密码</label>
		<input id="pwd" name="pwd" type="password">
		<span id="pwd_span"></span>
	</p>
	<p>确认密码 两次输入相同</p>
	<p>
		<label for="repwd">确认密码</label>
		<input id="repwd" name="repwd" type="password">
		<span id="repwd_span"></span>
	</p>
	<p>随机4位验证码(点击切换验证码)</p>
	<p>
		<label for="code">验证码</label>
		<input id="code" name="code" type="text">
		<span id="random_code"></span>
		<span id="code_span"></span>
	</p>
	<button id="btn">注册</button>
</body>
<script>
	// 名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于20   [0-9 a-z A-Z _$]
	// 密码6-12位  不能包含特殊字符 , 密码强弱(弱 z/1/A   中 包含两种   强 包含三种  超强 包含四种 )
	// 确认密码  两次输入相同
	// 随机4位验证码  （点击切换验证码）
	var btn = document.getElementById('btn')
	var userSpan = document.getElementById('user_span')
	var pwdSpan = document.getElementById('pwd_span')
	var repwdSpan = document.getElementById('repwd_span')
	var randomCode = document.getElementById('random_code')
	var codeSpan = document.getElementById('code_span')
	//验证码获取赋值
	setRanCode(randomCode)
	//点击验证码进行刷新验证码randomNumber()为封装的随机验证码
	randomCode.onclick = function () {
		setRanCode(randomCode)
	}
	//点击注册
	btn.onclick = function () {
		var pd = 0//总判断用来判断是否满足条件进行页面跳转
		//判断用户名是否正确
		// 名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于20   [0-9 a-z A-Z _$]
		var user = document.getElementById('user').value//获取用户输入的用户名
		//判断用户名输入长度是否合法
		if (user.length >= 6 && user.length <= 12) {
			if (isNaN(user.charAt(0))) {//判断首字母是否为数字
				var flag = true
				//判断用户名内是否含有非法字母
				for (var i = 0; i < user.length; i++) {
					var char = user.charAt(i)
					if (!list.includes(char)) {
						flag = false;
						//含有非法字母跳出循环判断
						break;
					}
				}
				if (flag) {
					//输入判断结果
					userSpan.innerHTML = '用户名输入正确哦'
					userSpan.style.color = 'springgreen'
					pd += 1//总判断
				} else userSpan.innerHTML = '用户名不能包含非法字符哦'
			}
			else {
				userSpan.innerHTML = '用户名不能以数字开头哦'
			}
		}
		else {
			userSpan.innerText = '用户名输入错误啦'
		}
		//判断密码是否正确
		// 密码6-12位  不能包含特殊字符 , 密码强弱(弱 z/1/A   中 包含两种   强 包含三种  )
		var pwd = document.getElementById('pwd').value
		//判断密码长度是否合法
		if (pwd.length >= 6 && pwd.length <= 12) {
			var flag = true
			//判断密码是否含有非法字符
			for (i = 0; i < pwd.length; i++) {
				if (!pwdList.includes(pwd.charAt(i))) {
					flag = false
					break//含有非法字母跳出循环判断
				}
			}
			if (flag) {
				//输出喵喵正确
				pwdSpan.innerHTML = '密码输入正确'
				pwdSpan.style.color = 'springgreen'
				pd += 1//总判断
				//循环遍历判断密码强度
				var flag1 = 0, flag2 = 0, flag3 = 0, flag
				for (i = 0; i < pwd.length; i++) {
					//判断密码是否含有数字
					if (numList.includes(pwd[i])) {
						flag1 = true
					}
					//判断密码是否含有小写字母
					if (smallList.includes(pwd[i])) {
						flag2 = true
					}
					//判断密码是否含有大写字母
					if (bigList.includes(pwd[i])) {
						flag3 = true
					}
				}
				//把flag加起来判断密码强度
				switch (flag1 + flag2 + flag3) {
					case 1: flag = '弱'
						break
					case 2: flag = '中'
						break
					case 3: flag = '强'
						break
				}
				pwdSpan.innerHTML = '密码强度为' + flag
			} else pwdSpan.innerHTML = '密码含有非法字符哦'
		} else pwdSpan.innerHTML = '密码输入错误'
		//判断两次密码是否一致
		// 确认密码  两次输入相同
		var repwd = document.getElementById('repwd').value
		if (repwd == pwd && repwd != '') {
			repwdSpan.innerHTML = '密码一致'
			repwdSpan.style.color = 'springgreen'
			pd += 1//总判断
		} else repwdSpan.innerHTML = '两次密码不一致，请重新输入'
		// 随机4位验证码  （点击切换验证码）
		var code = document.getElementById('code').value//获取用户输入的验证码
		var randomCode = document.getElementById('random_code').textContent//获取生成的验证码
		//判断用户输入的验证码和生成的是否一致(不论大小写)
		if (code.toLowerCase() == randomCode.toLowerCase()) {
			codeSpan.innerHTML = '验证码正确'
			codeSpan.style.color = 'springgreen'
			pd += 1//总判断
		} else {
			document.getElementById('random_code').innerHTML = randomNumber(4)
			codeSpan.innerHTML = '验证码错误，请重新输入'
			//输入错误把验证码填写清空
			document.getElementById('code').value = ''
			//换个颜色儿
			randomCode.style.color = randColor()
		}
		//判断是否全部输入正确 进行跳转
		if (pd == 4) {
			//总判断4个条件全部满足，进行跳转
			location.href = 'https://www.baidu.com'
		}
	}
 

</script>

</html>